<template>
  <uni-nav-bar title="业务明细" color="#333" left-icon="left" @clickLeft="navBack" statusBar></uni-nav-bar>
  <view class="business">
    <text @click="changeTab(1)" :style="{ background: status === 1 ? '' : 'white', color: status === 1 ? '' : '#333' }">
      已核销
    </text>
    <text :style="{ background: status === 0 ? '' : 'white', color: status === 0 ? '' : '#333' }" @click="changeTab(0)">
      未核销
    </text>
  </view>
  <scroll-view
    scroll-y="true"
    enable-back-to-top
    @scrolltolower="loadMore"
    class="scroll-box"
    :style="{ height: pageHeight + 'px' }"
  >
    <BusinessList :business="business" @activeWelf="activeWelf"></BusinessList>
  </scroll-view>
  <view class="bottom" @click="submit()">发放福利</view>
</template>

<script setup lang="ts">
import { yewuWelfare } from '@/gql/welfare';
import { navBack, navTo } from '@/utils/navigator';
import { showLoading, showToast } from '@/utils/prompt';
import BusinessList from '@c/welfare/businessList.vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { toPublish } from '@mqtt';
import { ref } from 'vue';

// static
const business = ref([]); //业务明细列表
const pageHeight = ref('');
// data
const userID = uni.getStorageSync('welfareId');
const status = ref(1); //1已核销2未核销
let currentPage = 1; //页数
let lastPage = 1; //总页数
let activeWel = ''; //选择的业务

onLoad(() => {
  //获取可视区域的高度
  uni.getSystemInfo({
    success: function (res) {
      pageHeight.value = (res.windowHeight - 220).toString();
    },
  });
});

onShow(() => {
  status.value = 1;
  currentPage = 1;
  business.value = [];
  getList();
});

/**
 * @param {Object} num 1已核销2未核销
 */
function changeTab(num) {
  status.value = num;
  currentPage = 1;
  business.value = [];
  getList();
}
/**
 * 获取核销业务列表
 */
function getList() {
  showLoading('加载中...');
  const payload = {
    query: yewuWelfare,
    variables: {
      driver_id: userID,
      page: currentPage,
      status: status.value,
    },
  };
  toPublish('ql/welfare/orderList', payload, (obj: any) => {
    const { order_list } = obj.data;
    business.value = [...business.value, ...order_list.list];
    lastPage = order_list.lastpage;
  });
}
/**
 * 加载更多
 */
function loadMore() {
  if (currentPage < lastPage) {
    currentPage++;
    getList();
  }
}
/**
 * @param {Object} num 存储选择核销业务
 */
function activeWelf(num) {
  activeWel = num;
}
/**
 * 提交需要领取福利的业务
 */
function submit() {
  if (!activeWel) {
    showToast('请选择您要发放的业务福利');
    return;
  }
  navTo(`welfare/activity?active=${activeWel}`);
}
</script>

<style lang="less">
.business {
  width: 100%;
  margin: 2.5% 0px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  text {
    width: 334rpx;
    height: 98rpx;
    background: linear-gradient(104deg, #41a3ff, #1b91ff);
    border-radius: 5px;
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
    text-align: center;
    line-height: 98rpx;
  }
}
.bottom {
  width: 310rpx;
  margin: 20rpx auto;
  height: 88rpx;
  background: #1697ff;
  border-radius: 5px;
  font-size: 32rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #fffefe;
  text-align: center;
  line-height: 88rpx;
}
</style>
